﻿<form role="form" id="static-text-editor" name="staticTextForm" unsaved-warning-form ng-show="activeStaticText">
    <div class="form-holder">
        <div class="breadcrumbs-container">
            <div data-item-breadcrumbs data-crumbs="activeStaticText.breadcrumbs"></div>
        </div>
        <div class="form-group">
            <label for="edit-static-text-highlight" class="wb-label" ng-i18next="StaticText"></label><br>
            <div class="pseudo-form-control">
                <div id="edit-static-text-highlight"
                     ui-ace="{ onLoad : setupAceForSubstitutions, require: ['ace/ext/language_tools'] }" ng-model="activeStaticText.text"></div>
            </div>
        </div>
        <div class="form-group">
            <label for="edit-static-attachment-name" class="wb-label">{{'StaticTextAttachmentName' | i18next}}&nbsp;<help key="attachmentName" /></label><br>
            <input id="edit-static-attachment-name" type="text" class="form-control" ng-model="activeStaticText.attachmentName" spellcheck="false" maxlength="32" />
        </div>

        <div class="form-group" ng-show="(doesQuestionSupportEnablementConditions() && !((showEnablingConditions===undefined && activeStaticText.enablementCondition) || showEnablingConditions))">
            <button type="button" class="btn btn-lg btn-link" ng-click="showEnablingConditions=true" ng-i18next="AddEnablingCondition"></button>
        </div>
        
        <div class="row" ng-show="(doesQuestionSupportEnablementConditions() && ((showEnablingConditions===undefined && activeStaticText.enablementCondition) || showEnablingConditions))">
          <div class="form-group col-xs-11" >
            <div class="enabling-group-marker" ng-class="{'hide-if-disabled': activeStaticText.hideIfDisabled}"></div>
            <label for="edit-question-enablement-condition">{{'EnablingCondition' | i18next}} <help key="conditionExpression" /></label>

            <input type="checkbox" class="wb-checkbox" disabled="disabled" checked="checked" ng-if="questionnaire.hideIfDisabled"
                   title="{{ 'HideIfDisabledNested' | i18next }}" />
            <input ng-if="!questionnaire.hideIfDisabled" id="cb-hideIfDisabled" type="checkbox" class="wb-checkbox" ng-model="activeStaticText.hideIfDisabled" />
            <label for="cb-hideIfDisabled"><span title="{{questionnaire.hideIfDisabled ? ('HideIfDisabledNested' | i18next) : ''}}"></span>{{'HideIfDisabled' | i18next}} <help key="hideIfDisabled" /></label>

            <div class="pseudo-form-control">
                <div id="edit-question-enablement-condition" ui-ace="{ onLoad : aceLoaded, require: ['ace/ext/language_tools'] }" ng-model="activeStaticText.enablementCondition"></div>
            </div>
          </div>
            <div class="form-group col-xs-1">
                <button type="button" class="btn cross instructions-cross"
                        ng-click="showEnablingConditions=false;activeStaticText.enablementCondition='';activeStaticText.hideIfDisabled=false;staticTextForm.$setDirty();"></button>
            </div>
        </div>
            
        <div class="form-group validation-group" ng-repeat="validation in activeStaticText.validationConditions" id="validationCondition{{$index}}">
            <div class="validation-group-marker"></div>
            <label>{{'ValidationCondition' | i18next}} {{$index + 1}} <help key="validationExpression" /></label>

            <input id="cb-isWarning{{$index}}" type="checkbox" class="wb-checkbox" ng-model="validation.severity" ng-true-value="'Warning'" ng-false-value="'Error'" />
            <label for="cb-isWarning{{$index}}"><span></span>{{'IsWarning' | i18next}}</label>

            <button class="btn delete-btn-sm delete-validation-condition" ng-click="removeValidationCondition($index)" tabindex="-1"></button>

            <div class="pseudo-form-control">
                <div ui-ace="{ onLoad : aceLoaded, require: ['ace/ext/language_tools'] }" ng-model="validation.expression"
                     ng-attr-id="{{'validation-expression-' + $index}}"
                     ng-attr-tabindex="{{$index + 1}}"></div>
            </div>

            <label for="validation-message-{{$index}}" class="validation-message">{{'ErrorMessage' | i18next}} <help key="validationMessage" /></label>
            <div class="pseudo-form-control">
                <div ng-attr-id="{{'validation-message-' + $index}}" ng-attr-tabindex="{{$index + 1}}"
                     ui-ace="{ onLoad : setupAceForSubstitutions, require: ['ace/ext/language_tools'] }" ng-model="validation.message"></div>
            </div>
        </div>
        <div class="form-group" ng-if="activeStaticText.validationConditions.length < 10">
            <button type="button" class="btn btn-lg btn-link" ng-click="addValidationCondition()" ng-i18next="AddValidationRule"></button>
        </div>


    </div>
    <div class="form-buttons-holder">
        <div class="pull-left">
            <button id="edit-static-text-save-button" ng-show="!questionnaire.isReadOnlyForUser" ng-class="{ 'btn-primary': staticTextForm.$dirty }" class="btn btn-lg" unsaved-warning-clear ng-click="saveStaticText()" ng-i18next>Save</button>
            <button id="edit-static-text-cancel-button" class="btn btn-lg btn-link" unsaved-warning-clear ng-click="cancelStaticText()" ng-i18next>Cancel</button>
        </div>
        <div class="pull-right">
            <button type="button" ng-show="!questionnaire.isReadOnlyForUser" id="add-comment-button" class="btn btn-lg btn-link" ng-click="toggleComments(activeQuestion)" unsaved-warning-clear>
                <span ng-i18next ng-show="!isCommentsBlockVisible && commentsCount == 0">EditorAddComment</span>
                <span ng-show="!isCommentsBlockVisible && commentsCount > 0">{{'EditorShowComments' | i18next: { count: commentsCount } }}</span>
                <span ng-i18next ng-show="isCommentsBlockVisible">EditorHideComment</span>
            </button>
            <button id="edit-static-text-delete-button" ng-show="!questionnaire.isReadOnlyForUser" class="btn btn-lg btn-link" ng-click="deleteStaticText()" unsaved-warning-clear ng-i18next>Delete</button>
            <ng-include src="'moveToChapterSnippet'" ng-show="!questionnaire.isReadOnlyForUser" />
        </div>
    </div>
</form>
